<template>
<div id="father">
  <div id="mother">
  <div class="tit">
   <i class="el-icon-menu" style="  color: #009688;"></i><b>&nbsp;选择功能模块</b>
  </div>

  <div class="son" @mouseenter="inf()" @mouseleave="inf_hover()" @click="inf_click()" id="son1">
    <i class="el-icon-user-solid"></i><b>个人信息</b>
  </div>

  <div class="son" @mouseenter="ord()" @mouseleave="ord_hover()" @click="ord_click()" id="son2">
    <i class="el-icon-s-order"></i><b>订单信息</b>
  </div>

  <div class="son" @mouseenter="spa()" @mouseleave="spa_hover()" @click="spa_click()" id="son3">
    <i class="el-icon-s-home"></i><b>车位管理</b>
  </div>
</div>
</div>
</template>

<script>
export default {
  name: "Selection_Function",
  data() {
    return {
      real: false
    }
  },
  mounted() {
    this.rel();
  },
  methods: {
    rel() {
      var i = localStorage.getItem("token");
      this.sa.ajax("/e-user/user/realNameDetection/" + i, {},
          function (resp) {
            this.real = resp.data;

          }.bind(this),
          {type: 'get'}
      )
    },

    inf() {
      var html = "<i class='el-icon-user-solid'></i><b>个人信息</b><br/>包含用户信息，钱包，实名认证等功能"
      $("#son1").html(html);
    },
    inf_hover() {
      var html = "<i class='el-icon-user-solid'></i><b>个人信息</b>"
      $("#son1").html(html);
    },
    inf_click() {
      var tab = {
        id: 'Proprietor_Information',
        name: "个人信息界面",
        view: () => import('@/sa-view/login/Proprietor_Information.vue')
      };
      this.sa_admin.showTab(tab);
    },
    ord() {
      var html = "<i class='el-icon-s-order'></i><b>订单信息</b><br/>包含订单查询，评价，订单投诉等功能"
      $("#son2").html(html);
    },
    ord_hover() {
      var html = "<i class='el-icon-s-order'></i><b>订单信息</b>"
      $("#son2").html(html);
    },
    ord_click() {
      var token = localStorage.getItem("token");
      this.sa.ajax("/e-user/user/getUserNum/" + token + "/" + 2, {},
          function (resp) {
            if (resp.data == true) {
              if (this.real == 1) {
                var tab = {
                  id: 'Order_Information',
                  name: "用户订单界面",
                  view: () => import('@/sa-view/login/Order_Information.vue')
                };
                this.sa_admin.showTab(tab);
              } else {
                this.sa.error("还未实名认证，请在 个人信息 中完善")
              }
            } else {
              this.sa.error("失败了")
            }
          }.bind(this),
          {type: 'post'}
      )
    },
    spa() {
      var html = "<i class='el-icon-s-home'></i><b>车位管理</b><br/>包含查看车位情况，修改车位价格，更新车位状态等功能"
      $("#son3").html(html);
    },
    spa_hover() {
      var html = "<i class='el-icon-s-home'></i><b>车位管理</b>"
      $("#son3").html(html);
    },
    spa_click() {
      var token = localStorage.getItem("token");
      this.sa.ajax("/e-user/user/getUserNum/" + token + "/" + 2, {},
          function (resp) {
            if (resp.data == true) {
              if (this.real == 1) {
                var tab = {
                  id: 'Parking_Management',
                  name: "车辆管理界面",
                  view: () => import('@/sa-view/login/Parking_Management.vue')
                };
                this.sa_admin.showTab(tab);
              } else {
                this.sa.error("还未实名认证，请在 个人信息 中完善")
              }
            } else {
              this.sa.error("失败了")
            }
          }.bind(this),
          {type: 'post'}
      )
    }
  }
}
</script>

<style scoped>
#father{
  background-color: white;
  width: 100%;
  height: 669px;
}
#mother{
  width: 60%;
  margin-left: 20%;
  height: 100%;
  background-color: white;
}
.tit{
  border-top-right-radius: 35px;
  border-bottom-left-radius: 35px;
  border-left: #805322 5px solid;
  border-right: #805322 5px solid;
  margin-top: 6%;
  width: 78.5%;
  margin-left: 10%;
  height: 7%;
  padding-top: 2%;
  background-color: white;
  text-align: center;
  font-size: 210%;
}
.son{
  text-align: center;
  padding-top: 5%;
  font-size: 140%;
  width: 80%;
  margin-top: 2%;
  margin-left: 10%;
  height: 10%;
  color: white;
  background-color: green;
  transition: width2s;
}
.son:hover{
  background-color: #428bca;
  height: 14%;
  border-bottom-right-radius: 70px;
  border-top-left-radius:70px ;
}
</style>